<template>
  <div class="_wz_echarMap">

    <!--实时数据-->
    <div class="_wz_echarMap_realTime">
      <div class="_wz_echarMap_realTime_top">
        <NumberInfo title="车辆实时在线" sub-title="" sub-total="5.3" status="down" class="_wz_echarMap_realTime_top_nr">
          <template #total>
            <CountUp :end="50193" :duration="4" />
          </template>
        </NumberInfo>

        <NumberInfo title="今日在线数" sub-title="" sub-total="5.3" status="down" class="_wz_echarMap_realTime_top_nr">
          <template #total>
            <CountUp :end="50193" :duration="4" />
          </template>
        </NumberInfo>

        <NumberInfo title="今日在线率" sub-title="" sub-total="5.3" status="down" class="_wz_echarMap_realTime_top_nr">
          <template #total>
            <CountUp :end="50193" :duration="4" />
          </template>
        </NumberInfo>
      </div>
      <div class="_wz_echarMap_realTime_bottom">

        <div>
          <div class="_wz_echarMap_realTime_bottom_title">今日行驶里程</div>
          <div><CountUp :end="1234" :duration="6" v-font="24" /></div>
        </div>
      </div>

    </div>

    <!--地图-->
    <div id="_wz_echarMap"></div>

    <!--柱状图-->
    <div class="_wz_echarMap_bottom">
      <histogram :dataConfiguration="histogramData" :mapSelectData="mapSelectData" v-if="!!histogramData.dataList && histogramData.dataList.length > 0"/>
    </div>
  </div>
</template>
<script>


import {
  getCurrentInstance,
  inject,
  nextTick,
  reactive,
  toRefs,
  toRef,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref,
  defineComponent,
  toRaw,
  watch
} from 'vue'
import {useRouter, useRoute} from "vue-router";
import mapData from "../dynamicVehicle/echartsMap/mapData.js";//包含城市的 中国地图
import chinaMapData from "../dynamicVehicle/echartsMap/chinaMapData.js";//包含省份的 中国地图


import {useMainStore} from '../../../store'  //pinia 使用 类似 vuex
import {storeToRefs} from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

import * as echartsGL from 'echarts-gl'
import histogram from "@/components/charts/baiDu/histogram/charts.vue";// 柱状图

//reactive
export default defineComponent({
  name: 'echarMap',//组件名称
  components: {
    histogram
  },//组件引用
  setup(props, context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用
    const $echarts = inject('$echarts');//引用echarts

    const state = reactive({
      mapMyChart:null,//地图对象
      mapOption:{},//地图属性
      mapSelectData:{},//地图选中的 数据
      chinaGeoCoordMap:[],
      chinaDatas:[
        {name:'河北',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'山西',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'辽宁',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'吉林',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'黑龙江',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'江苏',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'浙江',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'安徽',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'福建',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'台湾',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'江西',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'山东',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'河南',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'湖北',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'湖南',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'广东',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'海南',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'四川',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'贵州',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'云南',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'陕西',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'甘肃',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'青海',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'北京',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'天津',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'上海',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'重庆',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'内蒙古',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'广西',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'西藏',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'宁夏',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'新疆',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'香港',value:Math.floor(Math.random() * (100 - 1)) + 1},
        {name:'澳门',value:Math.floor(Math.random() * (100 - 1)) + 1},
      ],

      //柱状图
      histogramData:{
        "id":"histogram",
        "width":'100%',
        "height":'100%',
        "colors":['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff',"#2d8cf0","#19be6b","#ff9900","#ed4014","#9b66e6","#3fcece","#4b588d","#b7b83f","#b9783f","#4efd95","#2ebdcc","#375397","#22597e","#2e33d1","#3bd2a6","#95CEFF","#A9FF96","#FFBC75","#AAFFFA","#999EFF","#FF7599","#FDEC6D","#44A9A8","#2D8CF0"],
        "xColor":"#fff",
        "yColor":"#fff",
        "xShow":false,
        "yShow":false,
        "backColor":"rgba(0,0,0,0)",
        "legendColor":"#000",
        "dataList":[
          {"type":"类型13","name":"名称1","value":20},
        ],
        "legend":0,
        "marginUnit":"%",
        "top":10,
        "right":4,
        "bottom":4,
        "left":4,
        chartsClick:(data)=>{
          mapSelect(data.name)
          //处理 选中业务
          // console.log(data)
        }
      },
    });


    const loadData = () => {


      state.chinaGeoCoordMap = {
        '黑龙江': [127.9688, 45.368],
        '内蒙古': [110.3467, 41.4899],
        "吉林": [125.8154, 44.2584],
        '北京市': [116.4551, 40.2539],
        "辽宁": [123.1238, 42.1216],
        "河北": [114.4995, 38.1006],
        "天津": [117.4219, 39.4189],
        "山西": [112.3352, 37.9413],
        "陕西": [109.1162, 34.2004],
        "甘肃": [103.5901, 36.3043],
        "宁夏": [106.3586, 38.1775],
        "青海": [101.4038, 36.8207],
        "新疆": [87.9236, 43.5883],
        "西藏": [91.11, 29.97],
        "四川": [103.9526, 30.7617],
        "重庆": [108.384366, 30.439702],
        "山东": [117.1582, 36.8701],
        "河南": [113.4668, 34.6234],
        "江苏": [118.8062, 31.9208],
        "安徽": [117.29, 32.0581],
        "湖北": [114.3896, 30.6628],
        "浙江": [119.5313, 29.8773],
        "福建": [119.4543, 25.9222],
        "江西": [116.0046, 28.6633],
        "湖南": [113.0823, 28.2568],
        "贵州": [106.6992, 26.7682],
        "云南": [102.9199, 25.4663],
        "广东": [113.12244, 23.009505],
        "广西": [108.479, 23.1152],
        "海南": [110.3893, 19.8516],
        '上海': [121.4648, 31.2891]
      };
      // state.chinaDatas = [
      //   [{name: '黑龙江', value: 10}],
      // ];



      let chinaDatas = state.chinaDatas.sort((x,y)=> y.value - x.value) // 正序
      chinaDatas.map((k,i)=>{
        k.type = '车辆数'
        //获取中心点
        k.center = chinaMapData.chinaMapData.features.filter(item => item.properties.name == k.name)[0].properties.cp
      })

      state.histogramData.dataList = chinaDatas;







      loadMap();//地图数据加载
    }


    //加载地图
    const loadMap = () => {

      // myChart.showLoading();
      $echarts.registerMap('centerMap', chinaMapData.chinaMapData);
      // myChart.hideLoading();

      state.mapMyChart = $echarts.init(document.getElementById('_wz_echarMap'));
      // 绘制图表
      state.mapOption = {
        geo3D: {
          show: true,
          instancing:true,
          map: "centerMap",
          left: 0,//"4%",   //偏移量调整
          top: 0,//"5%",  //偏移量调整
          roam: true,
          zoom: 10,//放大级别
          regionHeight: 6,//厚度
          // //鼠标拂过
          // emphasis: {
          //   label: {
          //     show: false,
          //   },
          //   itemStyle: {
          //     color: 'rgba(1,18,43,0.8)',//付过 整体颜色
          //     borderColor: 'rgba(0,0,0,0)',
          //     borderWidth: 2,
          //   },
          // },
          itemStyle: {
            // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
            color: "rgba(81,147,157,0.8)", // 地图板块的颜色
            opacity: 0.8, // 图形的不透明度 [ default: 1 ]
            borderWidth: 1, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
            borderColor:'#fff'

          },
          // 贴图
          // 配置为全景贴图
          // environment: 'img/centerMap.png',

          shading:'color',//'realistic',

          light: {
            // 光照阴影
            main: {
              color: "#FFFFFF", // 光照颜色
              intensity: 2, // 光照强度
              shadowQuality: "light", // 阴影亮度
              shadow: true, // 是否显示阴影
              alpha: 50,
              beta: 10,
            },
          },

          viewControl:{
            autoRotate:false,//开启视角绕物体的自动旋转查看
            autoRotateSpeed:10,//物体自转的速度
            autoRotateDirection:'ccw',//旋转方向
            autoRotateAfterStill:5,//操作后 几秒恢复

            alpha: 88, // 视角绕 x 轴，即上下旋转的角度
            beta: 10, // 视角绕 y 轴，即左右旋转的角度
            distance: 100, // 视角距离主体的距离

            center:[5,0,0],//中心点

            //alpha 的 最大最小数据
            minAlpha:-360,//
            maxAlpha:360,//


            minBeta:-360,//
            maxBeta:360,//



            // rotateSensitivity: [1, 0], // 只能横向旋转
            // rotateSensitivity: [0, 1],// 只能纵向旋转
          },



          // regions : [ // 高亮3D地图对应的区块
          //   {
          //     name: '新疆', label: {show: true, color: "##000000",}, itemStyle: {color: "#ffffff", opacity: 1,}
          //   }
          // ],



        },
        series: [{
          type: "map3D",
          map: 'centerMap',
          regionHeight: 8,
          show: true,
          roam: false,
          label: {
            show: false,
          },
          itemStyle: {
            opacity: 0,
          },
          zlevel: 5,
          viewControl: {
            alpha: 50,
            center: [0, 0, 0],
            minDistance: 100,
            maxDistance: 200,
          },
          silent: false,
        }],

      };


      //点击事件
      toRaw(state.mapMyChart).on('click', function (param) {
        console.log(param)
        state.mapSelectData = param;

      });

      // //移入
      // toRaw(state.mapMyChart).on('mouseover', function (param) {
      //   // state.mapSelectData = param;
      //   console.log('移入')
      // });
      //
      // //移出
      // toRaw(state.mapMyChart).on('mouseout', function (param) {
      //   // state.mapSelectData = {};
      //   console.log('移出')
      // });


      toRaw(state.mapMyChart).setOption(state.mapOption);
      toRaw(state.mapMyChart).resize();



      // state.mapOption.geo3D.regions = [ // 高亮3D地图对应的区块
      //   {
      //     name: '新疆',
      //     label: {
      //       show: true,
      //       color: "##000000",
      //     },
      //     itemStyle: {
      //       color: "#ffffff",
      //       opacity: 1,
      //     }
      //   }
      // ];
      //
      // toRaw(state.mapMyChart).setOption(state.mapOption);


      //
      // regions :[ // 高亮3D地图对应的区块
      //   {
      //     name: '新疆',
      //     label: {
      //       show: true,
      //       color: "##000000",
      //     },
      //     itemStyle: {
      //       color: "#f00",
      //       opacity: 1,
      //     }
      //   }
      // ]
    }

    //地图选中  高亮
    const mapSelect = (name = '新疆')=>{

      return false;
      // console.log(name)
      // return false;

      state.mapOption.geo3D.regions = [ // 高亮3D地图对应的区块
        {
          name: name,
          label: {
            show: true,
            color: "##000000",
          },
          itemStyle: {
            color: "#ffffff",
            opacity: 1,
          }
        }
      ];

      state.mapMyChart.setOption(state.mapOption);
    }




    // 其他的生命周期
    onBeforeMount(() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted(() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
      loadData();//页面初始化加载数据
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate(() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated(() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount(() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted(() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
    }
  }
})


</script>
<style lang="less">
._wz_echarMap {
  position: relative;
  height: 100%;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  //background: #031b41;

  #_wz_echarMap {
    width: 100%;
    height: calc(100% - 244px);
  }
  ._wz_echarMap_bottom{
    height: 244px;
  }
  ._wz_echarMap_realTime{
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    justify-content: space-between;

    ._wz_echarMap_realTime_top{
      display: flex;
      ._wz_echarMap_realTime_top_nr{
        margin: 0 20px 0 0;
        .ivu-number-info-total{
          margin-right: 16px;
        }
        .ivu-number-info-title{
          color: #fff;
          margin-bottom: 10px;
          font-size: 14px;
        }
        .ivu-count-up{
          color: #0efaee;
        }
        .ivu-trend-text{
          color: #fff;
        }
      }

    }
    ._wz_echarMap_realTime_bottom{
      display: flex;
      justify-content: space-between;
      color: #fff;
      margin: 10px 0;

      ._wz_echarMap_realTime_bottom_title{

      }
    }

  }

}
</style>
